<template>
	<view>
		<view v-if="pdflist.length>0" class="u-m-t-20 flex prc-li">
			<block v-for="(pdf,j) in pdflist" :key="j">
				<view class="s-border" @click="download('http://www.cztouch.com/upfiles/soft/testpdf.pdf')">
					<u-image width="32rpx" height="32rpx" mode="widthFix" class="s-icon-top-right"
						:src="false?'/static/icon/noqualified.png':'/static/icon/qualified.png'"></u-image>
					<u-image width="58rpx" height="56rpx" mode="widthFix" class="s-icon"
						:src="'/static/icon/PDF@2x.png'"></u-image>
					<view class="name">检测报告</view>
				</view>
			</block>
		</view>
		<view v-else class="text-gray text-center">
			暂无图片
		</view>
	</view>
</template>

<script>
	export default {
		props: ['pdflist'],
		data() {
			return {

			}
		},
		methods: {
			//查看pdf
			download(url) {
				window.location.href = url
			},
			//文件预览
			previewFile(item) {
				uni.downloadFile({
					url: item.url,
					success: (res) => {
						let filePath = res.tempFilePath;
						uni.openDocument({
							filePath: filePath,
							success: (res) => {
								console.log('打开文档成功');
							}
						})
					}
				})
			},
		}
	}
</script>

<style>
	.prc-li {
		overflow-x: auto;
	}

	.s-border {
		position: relative;
		min-width: 120rpx;
		height: 120rpx;
		border: 1px solid #f1f1f1;
		margin-right: 30rpx;
	}

	.name {
		position: absolute;
		bottom: 0;
		width: 100%;
		font-size: 20rpx;
		background-color: #50A5BB;
		text-align: center;
		color: #fff;
		padding: 6rpx 0;
	}

	.s-icon-top-right {
		position: absolute;
		right: 0;
		top: 0;
	}

	.s-icon {
		position: absolute;
		top: 12%;
		left: 24%;
	}
</style>
